<template>
  <div class="home">
    <div class="maodia_content">
      <ul>
        <!--<a href="#one">-->
          <li ref="con">一</li>
        <!--</a>-->
        <a href="#two">
          <li>二</li>
        </a>
        <a href="#three">
          <li>三</li>
        </a>
      </ul>
    </div>
    
    <div class="maidian_val"   ref="con">
      <ul>
        <a name="one">
          <li class="val_one"></li>
        </a>
        <a name="two">
          <li class="val_two"></li>
        </a>
        <a name="three">
          <li class="val_three"></li>
        </a>
      </ul>
    </div>

    <div class="kong"></div>
  </div>
</template>
<script>
  export default {
    props: {},
    components: {},
    data() {
      return {
        scrollTop :''
      }
    },
    methods: {
      headerSrcoll(el){
        console.log(1);
        // console.log(document.body.scrollTop);
        // this.scrollTop  = this.$refs.content.scrollTop
console.log(this.$refs.con.scrollTop);
      }
    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .maodia_content {
    width: 100%;
    height: 30px;
  }

  .maodia_content ul {
    width: 100%;
    height: 100%;
  }

  .maodia_content ul li {
    width: 33%;
    height: 100%;
    float: left;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
  }

  .maidian_val {
    width: 100%;
    /*transform: ;*/
  }

  .maidian_val ul {
    width: 100%;
  }

  .maidian_val ul li {
    width: 100%;
    height: 300px;
    transition: all 1s;
  }

  .val_one {
    background: red;
  }

  .val_two {
    background: #2baee9;
  }

  .val_three {
    background: #4caf50;
  }

  .kong {
    width: 100%;
    height: 500px;
  }
</style>
